<template>
  <div style="padding-bottom:100px">
    <van-list
      :loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      :offset="500"
      @load="onLoad"
    >
      <div class="prod-list">
        <GoodItem 
          v-for="(item, index) in list" 
          :key="index"
          :gdata="item"
        />
      </div>
    </van-list>
  </div>
</template>

<script setup>
import GoodItem from '../components/GoodItem.vue'
import {productGet} from '../api/goods'
import { reactive, ref } from '@vue/reactivity'
const loading = ref(false);
const finished = ref(false);
const list = ref([]);
let limit = 20   //每页加载的数据条数
let page = 1  //页码
const onLoad = ()=>{ //初始化、每次触底的时候会自定触发
  console.log('onLoad执行了');
  loading.value = true  //【!!重要!!】触发onLoad时，通过设置为true，避免连续触发onLoad
  let offset = (page-1)*limit
  productGet({limit,offset}).then((res) => {  
    console.log(res);
    loading.value = false //【!!重要!!】异步请求结束后，设置为false，才能在下次触底时再次触发onLoad
    let {data} = res.data
    if(data.length){
      list.value = [
        ...list.value,  //原数据
        ...data //新数据
      ];
      page++
    }else{
      finished.value = true   //结束触底加载行为
    }
  })
}

</script>

<style scoped>

</style>